<template>
    <div class="wrap">
        <div class="wrapLeft">
            <h1>依云商城后台管理</h1>
        </div>
        <div class="wrapRight">
            <div class="box">
                欢迎您 ，
                <p>{{user}}</p>
                <el-button type="warning" @click="logOut">注销登录</el-button>
                <el-button type="success" icon="el-icon-setting"></el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        name:"HeaderName",
        data() {
            return {
                user:localStorage.getItem("user")
            }
        },
        methods:{
            logOut(){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '已退出登录'
                    });
                    this.$router.push("/login")
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .wrap{
        width: 100%;
        height: 100%;
        background-image: linear-gradient(#00bcd4,#2196f3);
        display: flex;
        justify-content: space-between;
        .wrapLeft{
            color: #fff;
        }
        .wrapRight{
            display: flex;
            align-items: center;
            .box{
                display: flex;
                height: 40px;
                align-items: center;
                p{
                    margin: 0 10px;
                }
            }
        }
    }
</style>